<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录页面</title>
    <link rel="stylesheet" href="../css/react.css" />
    <link rel="stylesheet" href="../css/login.css" />
    <link rel="stylesheet" href="../font/iconfont.css" />
  </head>
  <body>
    <!-- 头部 -->
    <div class="continer" id="continer">
      <div class="header">
        <div class="left">
          <h1><img src="../images/re_03.jpg" alt="京东" /></h1>
          <span>欢迎登录</span>
        </div>
        <p class="ts"></p>
        <div class="right">
          <a href="#">登录页面 调查问卷</a>
        </div>
      </div>
    </div>
    <!-- 登录 -->
    <div id="continer" class="login">
      <div class="login">
        <div class="box">
          <p class="yi">京东不会以任何理由要求您转账汇款，谨防诈骗</p>
          <h2>账户登录</h2>
          <li>
            <span>用户名</span><input class="username" type="text" placeholder="请输入用户名" />
          </li>
          <p class="ha"></p>
          <li>
            <span>密码</span><input class="password" type="password" placeholder="请输入密码" />
          </li>
          <p class="ha"></p>
          <button id="btn">登录</button>
          <h6>
            <div class="qq">
              <a href="#" class="one"
                ><i class="iconfont icon-QQ"></i><span>QQ</span></a
              >
              <span>|</span>
              <a href="#" class="two"
                ><i class="iconfont icon-logo-wechat"></i><span>微信</span></a
              >
            </div>
            <a href="./register.html">立即注册</a>
          </h6>
        </div>
      </div>
    </div>
  </body>
  <script src="../js/Ajax.js"></script>
  <script src="../js/jquery-3.4.1.min.js"></script>
  <script src="../js/cookie.js"></script>
  <script>
    $(".username").blur(function() {
        if (
          $(".username")
            .val()
            .trim() == ""
        ) {
          console.log($(".username").next());

          $(".username")
            .parent()
            .next()
            .text("用户名不为空");
          $(".username")
            .parent()
            .next()
            .css("color", "red");

          return false;
        } else if (
          $(".username")
            .val()
            .trim().length < 4 ||
          $(".username")
            .val()
            .trim().length > 8
        ) {
          $(".username")
            .parent()
            .next()
            .text("用户名在4-8位");
          $(".username")
            .parent()
            .next()
            .css("color", "red");

          return false;
        } else {
          $(".username")
            .parent()
            .next()
            .text("符合规定");
          $(".username")
            .parent()
            .next()
            .css("color", "green");
        }
      });
      //验证密码
      $(".password").blur(function() {
        if (
          $(".password")
            .val()
            .trim() == ""
        ) {
          $(".password")
            .parent()
            .next()
            .text("密码不为空");
          $(".password")
            .parent()
            .next()
            .css("color", "red");
          return false;
        } else if (
          $(".password")
            .val()
            .trim().length < 8 ||
          $(".password")
            .val()
            .trim().length > 16
        ) {
          $(".password")
            .parent()
            .next()
            .text("密码在8-16位");
          $(".password")
            .parent()
            .next()
            .css("color", "red");
          return false;
        } else {
          $(".password")
            .parent()
            .next()
            .text("符合规定");
          $(".password")
            .parent()
            .next()
            .css("color", "green");
        }
      });
      $("#btn").click(function(){
        var username=$(".username").val();
        var password=$(".password").val();
        setAjax({
          url:"../server/login.php",
          data:{
            username:username,
            password:password
          },
          type:"post",
          success:function(res){
            if(res.status==200){
              setCookie("username",username,7200);
              $(".ts").text(res.msg);
              $(".ts").css("color","green");
              
              setTimeout(function(){
                $(".ts").text("");
                location.href="./index.html";
              },1000)

            }else{
              $(".ts").text(res.msg);
              $(".ts").css("color","red")
              setTimeout(function(){
                $(".ts").text("");
              },3000)
            }
            
          }
        })
      })

  </script>
</html>
